<template>
	<div>
		<el-card class="!border-none pt-4 mt-[20px]" shadow="never">
			<div class="topTitle font-bold main-color text-2xl mb-5">
				实际成品重量
			</div>
			<el-row class="mt-[20px]">
				<el-col :span="6">
					<div class="main-color v-flex">
						<span >预计完货时间：</span>
						<el-date-picker type="date" placeholder="请选择" size="default" />
					</div>
				</el-col>
			</el-row>
			<el-table class="mt-[20px]" size="large" :data="lists"
				:header-cell-style="{'background':'#0054A6','color':'#FFB400','line-height':'52px','padding':'14px 0'}"
				:cell-style="{'color':'#0054A6','padding':'20px 0'}">
				<el-table-column label="产品名称" prop="scene_name" align="center" >
					<template #default="{ row }">
						<span>产品名称</span>
					</template>
				</el-table-column>
				<el-table-column label="图号" prop="超级好吃的巧克力" align="center"  />
				<el-table-column label="材质" prop="上海AAAA有限公司" align="center" />
				<el-table-column label="数量" prop="王小明" align="center" >
					<template #default="{row}">
						<el-input placeholder="请输入"></el-input>
					</template>
				</el-table-column>
				<el-table-column label="预计单重(kg/件)" prop="王小明" align="center" >
					<template #default="{row}">
						<el-input placeholder="请输入"></el-input>
					</template>
				</el-table-column>
				<el-table-column label="实际成品单重(kg)" prop="scene_name" align="center" >
					<template #default="{ row }">
						<span>实际成品单重(kg)</span>
					</template>
				</el-table-column>
				<el-table-column label="此款产品平均单量（kg）" align="center" >
					<template #default="{row}">
						<el-input placeholder="请输入"></el-input>
					</template>
				</el-table-column>
				<el-table-column label="备注" align="center" >
					<template #default="{row}">
						<el-input placeholder="请输入"></el-input>
					</template>
				</el-table-column>
			</el-table>
		</el-card>
		<el-card class="!border-none pt-4 mt-[20px]" shadow="never">
			<div class="topTitle font-bold main-color text-2xl mb-5">
				最终余款核定表格
			</div>
			<el-table class="mt-[20px]" size="large" :data="lists"
				:header-cell-style="{'background':'#0054A6','color':'#FFB400','line-height':'52px','padding':'14px 0'}"
				:cell-style="{'color':'#0054A6','padding':'20px 0'}">
				<el-table-column label="产品名称" prop="scene_name" align="center" >
					<template #default="{ row }">
						<span>产品名称</span>
					</template>
				</el-table-column>
				<el-table-column label="图号" prop="超级好吃的巧克力" align="center"  />
				<el-table-column label="材质" prop="上海AAAA有限公司" align="center" />
				<el-table-column label="数量" prop="王小明" align="center" >
					<template #default="{row}">
						<el-input placeholder="请输入"></el-input>
					</template>
				</el-table-column>
				<el-table-column label="平均单量(kg)" prop="王小明" align="center" >
					<template #default="{row}">
						<el-input placeholder="请输入"></el-input>
					</template>
				</el-table-column>
				<el-table-column label="公斤价格(元/公斤)" prop="scene_name" align="center" >
					<template #default="{ row }">
						<span>实际成品单重(kg)</span>
					</template>
				</el-table-column>
				<el-table-column label="单价(元/公斤)" align="center" >
					<template #default="{row}">
						<el-input placeholder="请输入"></el-input>
					</template>
				</el-table-column>
				<el-table-column label="合计(元)" align="center" >
					<template #default="{row}">
						<el-input placeholder="请输入"></el-input>
					</template>
				</el-table-column>
				<el-table-column label="备注" align="center" >
					<template #default="{row}">
						<el-input placeholder="请输入"></el-input>
					</template>
				</el-table-column>
			</el-table>
			<el-row class="mt-[20px]">
				<el-col :span="3">
					<div class="main-color v-flex">
						<span >已支付金额：</span>
						<span class="main-color1">62313</span>
					</div>
				</el-col>
				<el-col :span="3" class="ml-[20px]">
					<div class="main-color v-flex">
						<span >支付时间：</span>
						<span class="main-color1">62313</span>
					</div>
				</el-col>
				<el-col :span="3" class="ml-[20px]">
					<div class="main-color v-flex">
						<span >最终开票总金额：</span>
						<span class="main-color1">62313</span>
					</div>
				</el-col>
				<el-col :span="3" class="ml-[20px]">
					<div class="main-color v-flex">
						<span >剩余余款金额：</span>
						<span class="main-color1">62313</span>
					</div>
				</el-col>
				<el-col :span="3" class="ml-[20px]">
					<div class="main-color v-flex">
						<span >总毛重：</span>
						<span class="main-color1">62313</span>
					</div>
				</el-col>
				<el-col :span="3" class="ml-[20px]">
					<div class="main-color v-flex">
						<span >总净重：</span>
						<span class="main-color1">62313</span>
					</div>
				</el-col>
			</el-row>
		</el-card>
		<el-row class="mt-[30px]">
			<el-button class="main-color1 w-[100px] h-[36px]" >取消</el-button>
			<el-button class="w-[100px] h-[36px]" color="#0054A6" type="primary">提交</el-button>
		</el-row>
	</div>
</template>

<script lang="ts" setup>
	const lists = ref<Array<any>>([
		{},
	])
</script>

<style>
</style>